<template>
	<view>
		<view class="zaiui-bar-search-title-box">
			<view class="cu-bar search bg-white fixed no-shadow">
				<view class="action" @tap="BackPage">
					<text class="cuIcon-back" />
				</view>
				<view class="search-form round">
					<text class="cuIcon-search" />
					<input v-model="searchKey" :adjust-position="false" type="text" placeholder="包包" @confirm='searchInput'
					 confirm-type="search" />
					<text class="cuIcon-close close-icon" v-if="search_close" @tap="closeInput" />
				</view>
			</view>
			<!--占位的-->
			<view class="zaiui-seat-height" />
		</view>

		<view class="zaiui-tab-list" v-if="showGood">
			<!--商品列表-->
			<search-list :list_data="goodsData" @listTap="goodsListTap" show />
		</view>
		<view v-else>
			<!--搜索区域-->
			<view class="padding zaiui-search-list-view">
				<!--搜索记录-->
				<view class="search-list-view">
					<view class="search-bar-view">
						<text class="text-black">历史搜索</text>
						<text class="cuIcon-delete text-gray icon-right" @tap="deleteTap" />
					</view>
					<view class="btn-view">
						<button class="cu-btn round" v-for="(item,index) in historyData" :key="index" @tap="tapSearch(item)">{{item}}</button>
					</view>
				</view>

				<!--推荐搜索-->
				<view class="search-list-view">
					<view class="search-bar-view">
						<text class="text-black">推荐搜索</text>
					</view>
					<view class="btn-view">
						<button class="cu-btn round" v-for="(item,index) in hotSearch" :key="index" @tap="tapSearch(item)">{{item}}</button>
					</view>
				</view>
			</view>

			<!--处理历史记录-->

		</view>


	</view>
</template>

<script>
	import _tool from '@/static/zaiui/util/tools.js'; //工具函数
	import {
		search,
		info
	} from '@/http/request.js'
	import searchList from '@/components/zaiui-common/list/search-list';
	import {
		searchHistory
	} from '@/utils/storage.js'
	export default {
		components: {
			searchList
		},
		data() {
			return {
				search_close: false,
				searchKey: '',
				deleteView: false,
				goodsData: [],
				page: 0,
				hotSearch: [
					'衣服',
					'裤子',
					'内衣',
					'图书',
					'鞋子',
					'笔记本',
					'电器',
				],
				historyData:[]
			}
		},
		onLoad(options) {
			if (options.keyword) {
					this.tapSearch(options.keyword)
			}
		},
		created() {
		 this.historyData = searchHistory.get();
		},
		onReady() {
			_tool.setBarColor(true);
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
		},
		onReachBottom() {
			this.searchKey.length && this.searchGoods();
		},
		computed: {
			showGood() {
				return this.searchKey.length
			}
		},
		methods: {
			goodsListTap(e){
				let {goods_id,search_id,goods_sign} = e.data
				uni.navigateTo({
					url: `/pages/goods/goods?goods_sign=${goods_sign}&search_id=${search_id}&type=${this.searchKey}`
				});
			},
			BackPage() {
				uni.navigateBack();
			},
			async searchGoods() {
				this.page++;
				let res = await search(this.searchKey, this.page)
				if(res.length < 1){
					uni.showToast({
						title:'没有更多了',
						icon:'none'
					})
					return
				}
				this.goodsData.push(...res)
			},
			tapSearch(v){
				this.searchInput({detail:{value:v}})
			},
			searchInput(event) {
				let value = event.detail.value;
				this.searchKey = value;
				this.goodsData = [];
				
				if(!this.historyData.includes(value)){
					this.historyData.push(value)
					searchHistory.set(this.historyData)
				}
				this.searchGoods()
			},
			closeInput() {
				this.searchKey = '';
				this.page = 0;
				this.search_close = false;
			},
			deleteTap() {
				this.historyData = [];
				searchHistory.set(this.historyData)
			}
		}
	}
</script>

<style lang="scss">
	@import "../../static/zaiui/style/search.scss";

	.zaiui-tab-list {
		position: relative;
		width: 100%;
	}

	.zaiui-tab-list-title {
		.img-aau {
			width: 101.81rpx;
			margin-top: 12.72rpx;
		}

		.text-right {
			.img-aau {
				margin-right: 14.54rpx;
			}
		}

		.text-left {
			.img-aau {
				margin-left: 14.54rpx;
			}
		}
	}
</style>
